<template>
    <div class="header">
        <div class="header-left">
            <div class="header-left-time">统计时间</div>
            <span>2023年1月 ~ 2023年12日</span>
        </div>
        <div class="header-right">
            <el-row class="mb-4">
                <el-button>实时</el-button>
                <el-button type="primary" @click="dayBtn(0)">日</el-button>
                <el-button type="success" @click="weekBtn(1)">周</el-button>
                <el-button type="info" @click="monthBtn(2)">月</el-button>
                
                
                <el-button type="warning">
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                </el-button>
                <el-button type="danger">
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </el-button>
            </el-row>
        </div>

    </div>
    <div>

        <dataLine :lineState="(lineState as number)"  ></dataLine>
        <databaseTable :data="data" :total="total" :loadData="loadData"></databaseTable>
        
    </div>
</template>

<script setup lang="ts">

import { reactive, ref } from 'vue'
import dataLine from './ui/dataLine.vue'
import databaseTable from './ui/databaseTable.vue'

//自定义hook
import { useDataList } from './hooks'
import { weekDataApi } from '@/services/database';
import { mouthDataApi } from '@/services/database';
import { deepCopy } from '@/utils/Tools/deepCopy';
const [data, total, loadData] = useDataList()
console.log(data);
const datadata = ()=>{
    console.log(data);
}



let lineState = ref<number>();
//月数据请求
const monthBtn=function(v:number){
    lineState.value=v

}
//周数据请求

const weekBtn=function(v:number){
    lineState.value=v
   
}

//天数据请求
const dayBtn=function(v:number){
    lineState.value=v
}





</script>

<style lang="scss" scoped>
.header {
    height: 50px;
    width: 100%;

    .header-left {
        float: left;

        .header-left-time {
            float: left;
            font-weight: 600;
            padding-right: 10px;
        }
    }

    .header-right {
        float: right;
    }
}</style>